<template>
    <div class="container">
        <div class="content">
            <el-form :model="form" ref="form" label-width="5rem" :rules="rules">
                <el-form-item label="出版时间" prop="pubDate">
                    <el-date-picker v-model="form.pubDate" type="month" placeholder="请选择出版时间" />
                </el-form-item>
                <el-form-item label="出版社" prop="publisher">
                    <el-input v-model="form.publisher" placeholder="请输入出版社" />
                </el-form-item>
                <el-form-item label="售价" prop="price">
                    <el-input-number :min="1" :precision="2" v-model="form.price" placeholder="请输入价格" />
                </el-form-item>
                <el-form-item label="库存数量" prop="stockNum">
                    <el-input-number :min="0" v-model="form.stockNum" placeholder="请输入库存数量" />
                </el-form-item>
            </el-form>
        </div>
        <div class="footer">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="success" @click="submit">提交</el-button>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            form: {
                pubDate: "",
                publisher: "",
                price: "",
                stockNum: "",
            },
            rules: {
                pubDate: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请选择出版日期"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "change",
                },
                publisher: {
                    required: true,
                    validator: (rule, value, callback) => {
                        if (value === "") {
                            callback(new Error("请输入出版社"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "change",
                },
                price: {
                    required: true,
                },
                stockNum: {
                    required: true,
                },
            },
        };
    },
    beforeMount() {
        if (sessionStorage.getItem("orderInfo") !== null) {
            this.form = JSON.parse(sessionStorage.getItem("orderInfo"));
        }
    },
    methods: {
        prevStep() {
            console.log(this.form.pubDate);
            if (typeof this.form.pubDate === "string") {
                this.form.pubDate = new Date(this.form.pubDate);
                this.form.pubDate =
                    this.form.pubDate.getFullYear() +
                    "-" +
                    (this.form.pubDate.getMonth() + 1 < 10
                        ? "0" + (this.form.pubDate.getMonth() + 1).toString()
                        : (this.form.pubDate.getMonth() + 1).toString());
            }
            sessionStorage.setItem("orderInfo", JSON.stringify(this.form));
            this.$emit("step", 1);
        },
        submit() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    // if (typeof this.form.pubDate === "Date") {
                        this.form.pubDate = new Date(this.form.pubDate);
                        this.form.pubDate =
                            this.form.pubDate.getFullYear() +
                            "-" +
                            (this.form.pubDate.getMonth() + 1 < 10
                                ? "0" + (this.form.pubDate.getMonth() + 1).toString()
                                : (this.form.pubDate.getMonth() + 1).toString());
                    // }
                    // console.log(this.form.pubDate);
                    this.$emit("form", { ...this.form });
                    this.$emit("step", 3);
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;

    .content {
        flex: 2;

        .el-input {
            width: 40rem;
        }
        .el-input-number {
            width: 40rem;
        }

        .el-date-picker {
            width: 40rem;
        }
    }

    .footer {
        flex: 1;
        margin-top: 2rem;
    }
}
</style>
